<template>
	<view class="collapse-tree-item">
		<block v-for="(item, index) in list" :key="item.id">
			<view
				class="collapse-tree-item_title"
				:style="[{ marginLeft: item.rank * 15 + 'px' }]"
				@tap="onClick(item)"
			>
				<view v-if="border" class="collapse-tree-item-border"></view>
				<view class="collapse-tree-item_title-wrap">
					<image
						class="slot-image"
						:class="item.rank !== 1 && 'scale'"
						:src="
							item.rank === 1
								? '/static/dangjian/dangzuzhi.png'
								: '/static/dangjian/brokenline.png'
						"
					/>
					<text class="slot-text">{{ item.label }}</text>
				</view>
				<uni-icons
					v-if="item.children"
					:type="item.isOpen ? 'top' : 'bottom'"
					size="16"
					color="#bbb"
				/>
				<uni-icons v-else type="right" size="16" color="#bbb" />
			</view>
			<collapseTreeItem
				v-show="item.children && item.isOpen"
				v-bind="$attrs"
				:list="item.children"
			/>
		</block>
	</view>
</template>

<script>
export default {
	props: {
		list: {
			type: Array,
			default: () => []
		},
		border: {
			type: Boolean,
			default: true
		}
	},
	methods: {
		onClick(item) {
			if (Array.isArray(item.children) && item.children.length > 0) {
				item.isOpen = !item.isOpen
				return
			}
			this.$emit('treeItemClick', item)
		}
	}
}
// vue3 版本 无法通过 emits 传输事件
// const props = defineProps({
// 	list: {
// 		type: Array,
// 		default: () => []
// 	},
// 	border: {
// 		type: Boolean,
// 		default: true
// 	}
// })

// const emits = defineEmits(['treeItemClick'])
// const onClick = item => {
// 	if (Array.isArray(item.children) && item.children.length > 0) {
// 		item.isOpen = !item.isOpen
// 		return
// 	}
// 	emits('treeItemClick', item)
// }
</script>

<style lang="scss" scoped>
.slot-image {
	width: 60rpx;
	height: 60rpx;
	margin-right: 20rpx;
}
.slot-text {
	line-height: 60rpx;
	font-size: 32rpx;
}
.collapse-tree-item {
	background-color: #fff;
	&_title {
		display: flex;
		align-items: center;
		margin-right: 24rpx;
		position: relative;
		&-wrap {
			flex: 1;
			display: flex;
			align-items: center;
			padding: 20rpx 30rpx;
			padding-left: 0;
		}
	}
}
.collapse-tree-item-border {
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	height: 1px;
	transform: scaleY(0.5);
	background-color: #e5e5e5;
	z-index: 1;
}
.scale {
	// transform: scale(0.7);
	zoom: 0.7;
}
</style>
